@import "./app.css";

.markdown code:not(pre > code):not(.custom) {
	/* @apply bg-muted text-foreground relative rounded px-[0.375rem] py-[0.125rem] font-mono text-sm font-semibold; */
	@apply font-mono dark:text-[#fdffa4] text-[#0040A7] mx-[0.1em];
}

.markdown h1 code,
.markdown h2 code,
.markdown h3 code,
.markdown h4 code,
.markdown h5 code,
.markdown h6 code {
	all: unset !important;
	@apply font-mono! before:content-['`']! after:content-['`']!;
}

[data-theme*=" "] {
	display: flex !important;
	flex-direction: column;
}

[data-rehype-pretty-code-figure] [data-line-numbers] > [data-line]::before {
	@apply text-muted-foreground text-xs;
	counter-increment: line;
	content: counter(line);
	display: inline-block;
	width: 1rem;
	margin-right: 1.4rem;
	text-align: right;
}

[data-metadata] [data-copy-code] {
	@apply top-16!;
}

[data-rehype-pretty-code-figure] {
	@apply relative;

	& pre {
		@apply rounded-card mb-4 mt-6 w-full overflow-x-auto py-5 text-sm font-semibold;
	}

	& pre[data-metadata] {
		@apply mt-0 rounded-tl-none rounded-tr-none;
	}

	& code {
		@apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
		counter-reset: line;
		box-decoration-break: clone;
	}

	& [data-line] {
		@apply inline-block w-full basis-4 border-l-[3px] border-l-transparent py-0.5 pl-2.5 pr-5;
	}

	& [data-chars-id] {
		@apply pb-0.5 shadow-none;
	}

	& [data-highlighted-chars] {
		@apply bg-muted rounded-md px-1 pb-0.5 font-bold;
	}

	& [data-highlighted-line] {
		@apply !bg-muted;
	}
}

[data-preview] {
	& pre {
		@apply mb-0 mt-0;
	}

	& [data-copy-code] {
		@apply hidden;
	}
}

[data-chars-id="ul"] {
	@apply border-border! border-b! font-bold!;
}

[data-chars-id="hi"] {
	@apply rounded! p-1! font-bold!;
}

[data-chars-id="r"] {
	@apply border-border! font-bold!;
}

[data-chars-id="t"] {
	@apply border-b! font-bold!;
}

[data-chars-id="c"] {
	@apply border-b! font-bold!;
}

[data-rehype-pretty-code-title] {
	@apply bg-muted text-foreground/70 mt-4 rounded-t-xl px-4 py-2.5 text-sm tracking-wide;
}

[data-rehype-pretty-code-title] + pre {
	@apply mt-2;
}

[data-callout] > p:last-child {
	@apply mb-0!;
}

code[data-theme*=" "],
code[data-theme*=" "] span {
	color: var(--shiki-light);
	background-color: var(--shiki-light-bg);
}

.dark {
	& code[data-theme*=" "],
	code[data-theme*=" "] span {
		color: var(--shiki-dark);
		background-color: var(--shiki-dark-bg);
	}
}
